<template>
  <main class="main-wrapper">
    <aside>
      <ul>
        <li>
          <!-- 嵌套/子路由的跳转路径要写全 -->
          <router-link to="/main/list">唱片列表</router-link>
        </li>
        <li>
          <router-link to="/main/detail">唱片详情</router-link>
        </li>
      </ul>
    </aside>
    <div class="content">
      <router-view/>
    </div>
  </main>
</template>

<style lang="sass">
  .main-wrapper
    display: flex
    border-top: 1px solid #666
    min-height: calc(100vh - 106px)
    aside
      flex: 0 0 150px
      background: #eee
      a
        display: block
        text-decoration: none
        line-height: 40px
        background: #f9f9f9
        &.router-link-active
          background: #333
          color: #f9f9f9
    .content
      flex: 1
</style>
